<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue-2.6.12开发.js"></script>
</head>

<body>
    <!-- 
        Vue中的key有什么作用？(key的内部原理)
        
            1.虚拟dom中的key的作用:
                     key是虚拟dom对象的唯一标识,当数据发生改变时,Vue会根据【新数据】生成【新的虚拟dom】

                     随后Vue进行【新虚拟dom】与【旧虚拟dom】的差异比较 比较规则如下:


            2.对比规则:
                   (1).旧虚拟dom中找到了与新虚拟dom相同的Key:
                         ①.若虚拟dom中内容没变 直接使用之前的真实dom
                         ②.若虚拟dom中的内容变了 则生成新的真实dom 随后替换掉页面中之前的真实dom

                   (2).就虚拟dom中未找到与新虚拟dom相同的key
                        创建新的真实dom 随后渲染到页面



            3.用index作为key可能会引发的问题:
                       1.若对数据进行:逆序添加、逆序删除等破坏顺序操作:
                            会产生没有必要的真实dom更新 ==> 界面效果没问题 但效率低

                       2.如果结构中还包含输入类的dom:
                            会产生错误的dom更新 ==> 界面出问题

                            
            4.开发中如何选择key？
                    1.最好使用每条数据的唯一标识作为key 比如id 手机号 身份证号 学号等唯一值。

                    2.如果不存在对数据的逆序添加、删除等破坏顺序操作 仅用于渲染列表用于展示
                       使用index作为key是没有问题的

     -->

    <ul id="root">
        <!-- 1.遍历数组 经常用-->
        <button @click.once="add">添加一个备胎</button><br><br>
        <!-- :key是不展示在真实dom节点上的 为Vue内部征用 -->
        <li v-for="(p,index) of persons">
            {{p.name}}-{{p.age}}
            <input type="text">
        </li>

    </ul>

    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                persons: [
                    {
                        id: 001,
                        name: '刘亦菲',
                        age: 20
                    },
                    {
                        id: 002,
                        name: '陈宝莲',
                        age: 21
                    },
                    {
                        id: 003,
                        name: '许晴晴',
                        age: 22
                    }
                ],
                car: {
                    brand: '凌志',
                    model: 'Rs300',
                    color: '灰色'
                },
                str: 'LYFWD'
            },
            methods: {
                add() {
                    const p = { id: 004, name: '备胎胎', age: 18 }
                    this.persons.unshift(p)
                }
            }
        })
    </script>
</body>

</html>